<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>Ajax 02</h1>
        <button onclick="doAjaxGet()">Get</button>
        <button onclick="doAjaxPost()">Post</button>
        <button onclick="doAjaxDelete()">Delete</button>
        <button onclick="doAjaxPut()">Put</button>
    </div>
    <div id="result"></div>
<script>
    //update
    function doAjaxPut(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }
        xhr.open("PUT","http://localhost:8080/doAjaxUpdate");
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("id=2&name=苹果&remark=垃圾");
    }



    //delete
    function doAjaxDelete(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }
        xhr.open("Delete","http://localhost:8080/doAjaxDelete/2");
        xhr.send();
    }








    //post
    function doAjaxPost(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }
        xhr.open("POST","http://localhost:8080/doAjaxPost");
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send("id=2&name=小米&remark=不错");
    }









    //get
    function doAjaxGet(){
        let xhr=new XMLHttpRequest();
        console.log(xhr);
        xhr.onreadystatechange=function (){
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }
        xhr.open("GET","http://localhost:8080/doAjaxGet");
        xhr.send();
    }
</script>
</body>
</html>